<template>
  <div>
    <el-steps :active="2" align-center>
      <el-step title="选择影片场次"></el-step>
      <el-step title="选择座位"></el-step>
      <el-step title="15分钟内付款"></el-step>
      <el-step title="影院取票观影"></el-step>
    </el-steps>
    <div class="whole">
      <div class="left">
        <div class="seat-example">
          <span class="seat" :class="isSelected[0]"></span>
          <span style="margin: 0 20px">可选座位</span>
          <span class="seat" :class="isSelected[3]"></span>
          <span style="margin: 0 20px">已售座位</span>
          <span class="seat" :class="isSelected[2]"></span>
          <span style="margin: 0 20px">已选座位</span>
        </div>

        <div class="screen">银幕中央</div>

        <div class="seat-content">
            <div class="row" v-for="(value, key) in seats">
              <span style="width:10px;margin-right: 50px">{{key}}</span>
              <div style="display: flex; justify-content: flex-end">
                <span class="seat" :class="isSelected[seats[key][index]]" @click="pressSeat(key, index)" v-for="(item, index) in value"></span>
              </div>
            </div>
        </div>
      </div>

      <div class="right">
        <div class="right-content">
          <div class="right-header">
            <div class="poster"><img :src="session.sysMovie.moviePoster" alt=""> </div>
            <div class="movie-info">
              <p style="font-size: 20px;font-weight: 700">{{session.sysMovie.movieNameCn}}</p>
              <span>类型：{{session.sysMovie.movieCategoryList.join('/')}}</span>
              <span>时长：{{session.sysMovie.movieLength}}分钟</span>
            </div>
          </div>
          <div class="right-content">
            <div class="info-item">
              <span>影院：</span>
              <span>{{session.sysCinema.cinemaName}}</span>
            </div>
            <div class="info-item">
              <span>影厅：</span>
              <span>{{session.sysHall.hallName}}</span>
            </div>
            <div class="info-item">
              <span>版本：</span>
              <span>{{session.languageVersion}}</span>
            </div>
            <div class="info-item">
              <span>场次：</span>
              <span>{{session.sessionDate}} {{session.sysMovieRuntime.movieRuntimeName}}</span>
            </div>
            <div class="info-item">
              <span>票价：</span>
              <span>￥{{session.sessionPrice}}/张</span>
            </div>
            <span style="color: #999">座位：</span>
            <div class="seat-chose">
              <span class="ticket" v-if="pickedSeats.length > 0" v-for="item in pickedSeats">{{ item }}</span>
            </div>
            <div class="info-item" style="align-items: center">
              <span style="color: #333">总价：</span>
              <span style="font-size: 20px;color: #f03d37">￥{{session.sessionPrice * pickedSeats.length}}</span>
            </div>
            <div style="text-align: center;margin-top: 30px">
              <el-button type="danger" round @click="submitBill">提交订单</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: "ChooseSeat",
  data() {
    return {
      isSelected: {
        0: 'seat-default',
        1: 'seat-no',
        2: 'seat-pick',
        3: 'seat-sold'
      },
      seats: {},
      sessionId: this.$route.params.sessionId,
      session: {
        sysMovie:{
          movieCategoryList: []
        },
        sysCinema:{},
        sysHall: {},
        sysMovieRuntime: {}
      },
      pickedSeats: [],
      addForm:{
        userId: 0,
        sessionId: 0,
        seats: '',
      }
    }
  },
  created() {
    this.getSession()
  },
  methods: {
    async getSession(){
      const {data: resp} = await axios.get('sysSession/' + this.sessionId )
      console.log(resp)
      if(resp.code != 200) return this.$message.error(resp.msg)
      this.session = resp.data
      this.session.sysMovie.moviePoster = this.global.base + JSON.parse(this.session.sysMovie.moviePoster)[0]
      this.seats = JSON.parse(resp.data.sessionSeats)
      this.session.sysMovie.movieCategoryList = this.session.sysMovie.movieCategoryList.map((obj, index) => {
        return obj.movieCategoryName
      })
      console.log(this.seats)
    },
    pressSeat(key, idx){
      let seat_str = key + "排" + (idx+1) + "座"
      if (this.seats[key][idx] === 0){
        if (this.pickedSeats.length === 5){
          this.$alert('您最多选择五个座位', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).catch(err => err)
          return
        }
        this.$set(this.seats[key], idx, 2)
        this.pickedSeats.push(seat_str)
      } else if (this.seats[key][idx] === 2){
        this.$set(this.seats[key], idx, 0)
        this.pickedSeats.splice(this.pickedSeats.indexOf(seat_str), 1)
      }
      console.log(this.pickedSeats)
    },
    async submitBill(){
      this.addForm.userId = JSON.parse(window.sessionStorage.getItem('loginUser')).userId
      this.addForm.sessionId = this.sessionId
      this.addForm.seats = JSON.stringify(this.pickedSeats)
      console.log(this.addForm)
      axios.defaults.headers.post['Content-Type'] = 'application/json'
      const { data: res} = await axios.post('sysBill', JSON.stringify(this.addForm));
      if(res.code != 200) {
        this.$message.error('添加订单失败！');
        return
      }
      console.log(res.data)
      this.$router.push('/billDetail/' + res.data.billId)
    }
  }
}
</script>

<style scoped>

.el-step {
  margin: 40px auto;
}

.whole{
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #e5e5e5;
  display: flex;
}

.left {
  width: 820px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #e5e5e5;
}

.right{
  width: 340px;
  background-color: #f9f9f9;
  padding: 20px;
}

.seat {
  display: inline-block;
  width: 30px;
  height: 26px;
  margin: 0 5px;
  background-position: 0 1px;
}

.seat-default {
  background: url("../../assets/sofa-unpick.png") no-repeat;
  background-size: cover;
}

.seat-empty {
  background: url("../../assets/sofa-empty.png") no-repeat;
  background-size: cover;
}

.seat-sold {
  background: url("../../assets/sofa-forbidden.png") no-repeat;
  background-size: cover;
}

.seat-pick{
  background: url("../../assets/sofa-pick.png") no-repeat;
  background-size: cover;
}

.seat-example{
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
}

.screen{
  width: 550px;
  padding-top: 50px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: url() no-repeat;
  background-position-x: center;
  position: relative;
  margin: 40px 0 40px 0;
}

.row{
  white-space: nowrap;
  margin-top: 10px;
  padding: 0 10px;
  text-align: center;
  display: flex;
}


.seat-content{
  margin-bottom: 40px;
  overflow-x: scroll;
  width: 90%;
  padding: 10px;
}

.poster{
  width: 115px;
  height: 158px;
}

.poster>img{
  width: 100%;
  height: 100%;
}

.right-header{
  display: flex;
}

.movie-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
}

.info-item{
  display: flex;
  margin: 15px 0;
  font-size: 14px;
}

.info-item :first-child{
  color: #999999;
}

.seat-chose{
  margin-top: 20px;
  margin-left: 42px;
  margin-bottom: 20px;
  position: relative;
  top: -5px;
}

.ticket{
  cursor: default;
  position: relative;
  font-size: 13px;
  color: #f03d37;
  display: inline-block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 12px 10px 0;
  background: url() no-repeat;
}
</style>